<template>
  <div class="col-grow column loginWrap">
    <div class="contentTop">
      <div class="login">
<!--        <div class="login-left">-->
<!--          <div style="position: absolute; top: 30px; left: 30px">-->
<!--            <p style="color: #fff; font-size: 20px; margin-bottom: 10px">-->
<!--              {{ $t('systemTitle') }}-->
<!--            </p>-->
<!--            <p style="color: #fff; font-size: 12px">{{ $t('computingPlatform') }}</p>-->
<!--          </div>-->
<!--          <img-->
<!--            :src="loginPages"-->
<!--            style="-->
<!--            position: absolute;-->
<!--            bottom: 70px;-->
<!--            right: 30px;-->
<!--            width: 300px;-->
<!--            height: 200px;-->
<!--          "-->
<!--          />-->
<!--        </div>-->
        <div class="login-right">
          <div class="language">
            <img :src="network" class="language-icon" />
            <el-dropdown @command="handleCommand" class="select">
            <span class="el-dropdown-link">
              {{ languageText }}<el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
            </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="English">English</el-dropdown-item>
                  <el-dropdown-item command="Chinese">简体中文</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="loginTitle">
            <div class="text">{{ $t('loginTitle') }}</div>
            <div class="line"></div>
          </div>
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            style="width: 100%; margin-top: 20px"
            status-icon
          >
            <el-form-item prop="username">
              <el-input
                spellcheck="false"
                v-model="ruleForm.username"
                :placeholder="$t('username')+'/'+$t('mailbox')"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                spellcheck="false"
                autocomplete="off"
                :type="passwordShow ? 'text' : 'password'"
                v-model="ruleForm.password"
                :placeholder="$t('password')"
                @keyup.enter="sign"
              >
                <template #suffix
                ><i class="password-eyes" @click="passwordShow = !passwordShow">
                  <img
                    style="width: 16px"
                    :src="passwordShow ? openEye : closeEye"
                  />
                </i>
                </template>
              </el-input>
            </el-form-item>
            <p
              style="
              width: 100%;
              text-align: right;
              font-size: 12px;
              color: #7f8289;
            "
            >
              {{ $t('forgotPassword') }}
            </p>
            <el-form-item>
              <el-button
                :loading="loading"
                type="primary"
                @click="submitForm(ruleFormRef)"
                style="width: 100%; height: 50px"
              >
                {{ $t('login') }}
              </el-button>
            </el-form-item>
            <p style="text-align: center; font-size: 12px">
              {{ $t('noAccount') }}？<span style="color: rgb(108, 116, 247)">{{ $t('registerNow') }}</span>
            </p>
          </el-form>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="txt">版权所有：中国科技院深圳先进技术研究院   粤ICP备09184136号-3</div>
      <div class="txt">地址：深圳市南山区西丽深圳大学城 学苑大道1068号   邮编：518055   电子邮箱：info@siat.ac.cn</div>
    </div>
  </div>
</template>

<script setup lang="ts">

import { useI18n } from 'vue-i18n';
const { locale, t } = useI18n({ useScope: 'global' });
import loginPages from 'assets/dataSet/login-pages.png';
import loginBg from 'assets/dataSet/login_bg.png';
import network from 'assets/dataSet/network.png';
import openEye from 'assets/dataSet/open-eye.png';
import closeEye from 'assets/dataSet/close-eye.png';
import { ArrowDown } from '@element-plus/icons-vue';
import { ref, reactive } from 'vue';
import { useAuthStore } from 'src/stores/auth';
import { dataSetStore } from 'src/stores/dataSet';
const store = dataSetStore();
const authStore = useAuthStore();
import { useRouter } from 'vue-router';
const router = useRouter();
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import { isAdminInterface } from 'src/api/user';
import { userNameIsStop } from 'src/api/user';
// import {error} from "echarts/types/src/util/log";
let loading = ref(false);
let passwordShow = ref(false);
let languageText = authStore.systemLanguage === 'zn-US'?'简体中文':'English';
interface RuleForm {
  username: string;
  password: string;
}
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  username: '',
  password: '',
});
initLanguage();
function initLanguage(){
  let languages = authStore.systemLanguage;
  if( languages === 'zn-US' ){
    locale.value = 'zn-US';
    authStore.setSystemLanguage('zn-US')
  }else{
    locale.value = 'en-US';
    authStore.setSystemLanguage('en-US')
  }
}
const validateUsername = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error(t('pleaseEnterYourLoginAccount')));
  }
  authStore
    .userIsStop(ruleForm.username)
    .then((res) => {
      if (res.data.msg !== 'continue') {
        callback(new Error(t('theUserHasBeenDeactivated')));
      }
      callback();
    })
    .catch((err) => {
      callback(new Error(err.response.data.msg));
      loading.value = false;
    });
};
const validatePassword = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error(t('pleaseEnterYourLoginPassword')));
  }else {
    callback();
  }
};
// password
const rules = reactive<FormRules<RuleForm>>({
  username: [{ required: true, validator: validateUsername, trigger: 'blur' }],
  password: [{ required: true, validator: validatePassword, trigger: 'blur' }],
});

const handleCommand = (val:any) => {
  if (val === 'English') {
    locale.value = 'en-US';
    languageText = 'English';
    authStore.setSystemLanguage('en-US');//设置缓存为英文
  } else {
    locale.value = 'zn-US';
    languageText = '简体中文';
    authStore.setSystemLanguage('zn-US');//设置缓存为中文
  }
};



function isAdmin() {
  isAdminInterface().then((res) => {
    loading.value = false;
    const { is_admin } = res.data;
    const userInfo = { is_admin: is_admin };
    localStorage.setItem('user', JSON.stringify(userInfo)); //存储是否是系统管理员
    ElMessage.success(`Hi, ${ruleForm.username} 欢迎使用本平台！`);
    router.replace({ path: '/v2/set-project' });
  });
}
function sign() {
  loading.value = true;
  authStore
    .signin(ruleForm.username, ruleForm.password)
    .then(() => {
      isAdmin(); //判断是否是系统用户或者普通用户
    })
    .catch((err) => {
      loading.value = false;
      ElMessage.error('用户名或密码错误');
    });
}
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      store.setMenuOpen(0)
      sign();
    }
  });
};
</script>

<style lang="scss" scoped>
.loginWrap {
  .contentTop{
    position: relative;
    background-image: url(/images/login_bg.png);
    background-position: center center;
    width: 100%;
    background-size: 100%;
    height: 90vh;
    background-color: #E4E9F3;
    .login {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      position: absolute;
      width: 720px;
      height: 404px;
      //left: 0;
      right: 10%;
      top: 0;
      bottom: 0;
      margin: auto;
      //.login-left {
      //  position: relative;
      //  display: flex;
      //  justify-content: center;
      //  width: 50%;
      //  background-color: rgb(108, 116, 247);
      //}
      .login-right {
        width: 50%;
        vertical-align: middle;
        background-color: rgba(255, 255, 255, 0.8);
        box-shadow: 5px 5px 20px 5px rgba(12, 12, 13, 0.2);
        border-radius: 6px;
        position: relative;
        box-sizing: border-box;
        padding: 20px;
        .language {
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          height: 30px;
          align-items: center;
          width: 100%;
          .language-icon {
            width: 18px;
            height: 18px;
            margin-right: 4px;
            margin-top: 3px;
          }
          //.select {
          //  width: 70px;
          //}
        }
        .loginTitle {
          display: flex;
          flex-direction: column;
          margin-top: 30px;
          width: 100%;
          .text {
            font-weight: bold;
            text-align: center;
            font-size: 14px;
            letter-spacing: 1px;
          }
          .line {
            width: 24px;
            height: 3px;
            margin: 5px auto 0 auto;
            border-radius: 2px;
            background-color: #1b5bd8;
          }
        }
      }
    }
  }
  .footer{
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    height: 10vh;
    .txt{
      color: #999999;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
    }
  }
}

.error {
  color: $negative;
  width: 100%;
  text-align: center;
  position: absolute;
  left: 50px;
  bottom: 10px;
}

.login-title {
  line-height: 60px;
  font-size: 22px;
  font-weight: 600;
  margin-left: 20px;
  color: #333;
}
</style>
